@import "../../../shared/colors/colors.module.css";

.text {
  /* using auto instead of 100% so that text doesnot push everything to the edge */
  width: auto;
  color: inherit;
  overflow-wrap: anywhere;

  @each $color in colors {
    &[data-color="$(color)"] {
      color: var(--color-fg-$(color));
    }
  }
}

.clampedText {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
